<template>
    <twoGridPanel>
        <template #left>
            <a-card :bordered="false">
                <orgTree @emitId="emitId" :treeData="treeData"></orgTree>
            </a-card>
        </template>
        <template #right>
            <!-- search panel -->
            <new-search-panel :showAdvanced="false" @search="onSearch" @reset="onReset" v-if="$hasPerm('sysUser:page')">
                <template #default>
                    <a-col :md="24" :sm="24">
                        <a-form-item label="关键词">
                            <a-input :maxLength="35" v-model:value="queryParam.searchValue" allow-clear placeholder="请输入姓名、账号、手机号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="24" :sm="24">
                        <a-form-item label="状态">
                            <a-select v-model:value="queryParam.searchStatus" allow-clear placeholder="请选择状态">
                                <a-select-option v-for="(item, index) in statusDictTypeDropDown" :key="index" :value="item.code">{{
                                    item.value
                                }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </template>
                <template #advanced>
                    <!-- 这里放置扩展查询项 -->
                </template>
                <template #button>
                    <a-button type="primary" @click="addForm()" v-if="$hasPerm('sysUser:add')">
                        <template #icon><PlusOutlined /></template>
                        新增用户</a-button
                    >
                </template>
            </new-search-panel>
            <!-- list table -->
            <dynamic-table
                :scrollX="1000"
                :fixed="true"
                :tableType="1"
                ref="tableRef"
                rowKey="id"
                :columns="columns"
                :get-list-func="getUserList"
                :queryParam="queryParam"
            >
                <template #sex="{ text }" v-if="sexlist.length > 0">
                    {{ filterEnum(sexlist, text) }}
                </template>
                <template #status="{ text, record }" v-if="$hasPerm('sysUser:changeStatus')">
                    <a-popconfirm placement="top" :title="text === 0 ? '确定停用该用户？' : '确定启用该用户？'" @confirm="editStatus(text, record)">
                        <a-switch checked-children="正常" un-checked-children="停用" :checked="text === 0" />
                    </a-popconfirm>
                </template>
                <template #action="{ record }">
                    <a @click="editForm(record.id)" v-if="$hasPerm('sysUser:edit')">编辑</a>
                    <a-divider type="vertical" v-if="$hasPerm('sysUser:edit')" />
                    <a-dropdown
                        v-if="
                            $hasPerm('sysUser:resetPwd') ||
                            $hasPerm('sysUser:grantRole') ||
                            $hasPerm('sysUser:grantData') ||
                            $hasPerm('sysUser:delete')
                        "
                    >
                        <a class="ant-dropdown-link"> 更多 <DownOutlined /></a>
                        <template #overlay>
                            <a-menu>
                                <a-menu-item v-if="$hasPerm('sysUser:resetPwd')">
                                    <a-popconfirm placement="topRight" title="确认重置密码为123456？" @confirm="resetPwd(record)">
                                        <a>重置密码</a>
                                    </a-popconfirm>
                                </a-menu-item>
                                <a-menu-item v-if="$hasPerm('sysUser:grantRole')">
                                    <a @click="sqRole(record.id)">授权角色</a>
                                </a-menu-item>
                                <a-menu-item v-if="$hasPerm('sysUser:grantData')">
                                    <a @click="$refs.userOrgForm.userOrg(record)">授权数据</a>
                                </a-menu-item>
                                <a-menu-item v-if="$hasPerm('sysUser:delete')">
                                    <a-popconfirm placement="topRight" title="确认删除？" @confirm="userDelete(record)">
                                        <a>删除</a>
                                    </a-popconfirm>
                                </a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </template>
            </dynamic-table>
            <!-- add/edit modal -->
            <operationFrom ref="formRef" @refresh="refresh" :treeData="treeData" />
            <!-- 授权角色 -->
            <userRoleForm ref="userRoleRef" @refresh="refresh"></userRoleForm>
            <!-- 授权数据 -->
            <userOrgForm ref="userOrgForm" @refresh="refresh" :treeData="treeData" />
        </template>
    </twoGridPanel>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, Fragment, onMounted, ref, nextTick } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { changeStatus, getUserList, getOrgTree, sysUserResetPwd, sysUserDelete, sysUserDetail, sysUserChangeStatus } from '@/api/system/user'
import { columns } from './columns'
import { filterEnum } from '@/utils/common'
import { useStore } from '@/store'
import { newSearchPanel, DynamicTable, twoGridPanel } from '@/components'
import operationFrom from './components/operationFrom.vue'
import userRoleForm from './components/userRoleForm.vue'
import userOrgForm from './components/userOrgForm.vue'
import orgTree from './components/org-tree.vue'

export default defineComponent({
    name: 'sys_user_mgr',
    components: {
        orgTree,
        operationFrom,
        userRoleForm,
        userOrgForm,
        DynamicTable,
        twoGridPanel,
        newSearchPanel
    },
    setup() {
        const tableRef = ref<any>(null)
        const formRef = ref<any>(null)
        const userRoleRef = ref<any>(null)
        const userOrgForm = ref<any>(null)
        const store = useStore()
        const state = reactive({
            sexlist: [],
            treeData: [],
            statusDictTypeDropDown: [],
            queryParam: {
                searchValue: '',
                searchStatus: null,
                'sysEmpParam.orgId': ''
            },
            tableLoading: false,
            rowSelection: {
                onChange: (selectedRowKeys, selectedRows) => {
                    state.rowSelection.selectedRowKeys = selectedRowKeys
                },
                selectedRowKeys: []
            }
        })
        onMounted(() => {
            store.dispatch('enums/getEnum', 'sex').then((res) => {
                state.sexlist = res
            })
            store.dispatch('enums/getEnum', 'common_status').then((res) => {
                state.statusDictTypeDropDown = res
            })
            //   获取机构树
            getOrgTree().then((res) => {
                state.treeData = res
            })
        })

        /**
         * 树事件
         */
        function emitId(v) {
            onReset()
            state.queryParam['sysEmpParam.orgId'] = v
            tableRef.value.refreshTableData()
        }
        /**
         * 查询
         */
        const onSearch = () => {
            tableRef.value.queryParam = state.queryParam
            tableRef.value.resetPagination()
            tableRef.value.refreshTableData()
        }
        /**
         * 查询当前页
         */
        const refresh = () => {
            tableRef.value.refreshTableData()
        }
        /**
         * 重置
         */
        const onReset = () => {
            state.queryParam = {
                searchValue: '',
                searchStatus: null,
                'sysEmpParam.orgId': ''
            }
            // 重置分页并查询
            onSearch()
        }
        /**
         * 重置密码
         */
        function resetPwd(record) {
            sysUserResetPwd({ id: record.id }).then(() => {
                message.success('重置成功')
                refresh()
            })
        }
        /**
         * 删除商户
         * @param record
         */
        function userDelete(record) {
            sysUserDelete(record).then(() => {
                message.success('删除成功')
                refresh()
            })
        }
        /**
         * 授权角色
         */
        function sqRole(id) {
            userRoleRef.value.initData(id)
        }
        /**
         * 新增用户
         */
        function addForm() {
            formRef.value.title = '新增用户'
            formRef.value.id = ''
            formRef.value.visible = true
            formRef.value.add = true
        }
        /**
         * 修改用户状态
         */
        function editStatus(code, record) {
            sysUserChangeStatus({ id: record.id, status: ~~!code }).then((res) => {
                message.success('操作成功')
                refresh()
            })
        }
        /**
         * 编辑用户
         */
        function editForm(id) {
            sysUserDetail({ id: id }).then((res) => {
                formRef.value.detailData = res
                formRef.value.title = '编辑用户'
                formRef.value.id = id
                formRef.value.add = false
                formRef.value.visible = true
            })
        }
        return {
            ...toRefs(state),
            emitId,
            columns,
            tableRef,
            userRoleRef,
            userOrgForm,
            formRef,
            sqRole,
            getUserList,
            onReset,
            onSearch,
            refresh,
            addForm,
            editForm,
            editStatus,
            resetPwd,
            userDelete,
            filterEnum
        }
    }
})
</script>
<style scoped lang="scss">
:deep(.ant-tree-title) {
    width: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
}
</style>

